import React from 'react'
import NavBar from '@/components/NavBar'
import Input from '@/components/Input'
import { useFormik } from 'formik'
import styles from './index.module.scss'
export default function Login() {
  // 使用formik绑定表单
  const form = useFormik({
    // 表单的初始值
    initialValues: {
      mobile: '',
      code: '',
    },
    // 当触发表单的提交事件的时候，会触发
    onSubmit(values) {
      console.log(values)
    },
    validate(values) {
      const myErrors = {}
      if (values.mobile.length === 0) {
        myErrors.mobile = '手机号码不能为空'
      }
      if (!/^1[3-9]\d{9}$/.test(values.mobile)) {
        myErrors.mobile = '手机号码格式不正确'
      }
      if (!/^\d{6}$/.test(values.code)) {
        myErrors.code = '验证码必须是6位数字'
      }
      return myErrors
    },
  })
 
  return (
    <div className={styles.root}>
      {/* 导航栏组件 */}
      <NavBar extra="...">登录</NavBar>
      {/* 主体内容部分 */}
      <div className="content">
        {/* 标题 */}
        <h3>短信登录</h3>
        <form onSubmit={form.handleSubmit}>
          {/* 手机号输入框 */}
          <div className="input-item">
            <div className="input-box">
              <Input
                type="text"
                name="mobile"
                placeholder="请输入手机号"
                autoComplete="off"
                maxLength={11}
                value={form.values.mobile}
                onChange={form.handleChange}
                onBlur={form.handleBlur}
              />
            </div>
            {/* form中有个属性 touched时一个对象，能够得到当前手指所触摸的区域*/}
            {form.errors.mobile && form.touched.mobile ? (
              <div className="validate">{form.errors.mobile}</div>
            ) : (
              ''
            )}
          </div>

          {/* 短信验证码输入框 */}
          <div className="input-item">
            <div className="input-box">
              <Input
                name="code"
                placeholder="请输入验证码"
                maxLength={6}
                autoComplete="off"
                extra="获取验证码"
                onExtraClick={() => console.log(123)}
                value={form.values.code}
                onChange={form.handleChange}
                onBlur={form.handleBlur}
              />
            </div>
            {form.errors.code && form.touched.code ? (
              <div className="validate">{form.errors.code}</div>
            ) : (
              ''
            )}
          </div>

          {/* 登录按钮 */}
          <button type="submit" className="login-btn">
            登录
          </button>
        </form>
      </div>
    </div>
  )
}
